<!--发布视频-->
<template>
    <div id="app">
        <page-header-white @getInfo="getInfo" @getBack="getBack"/>
        <div class="main">
            <div class="main-info">
                <div class="list">
                    <div class="list-title" @click="handleSpace">
                        <img src="@assets/my-article.png" alt="">
                        <span>我的文章</span>
                    </div>
                    <div class="list-item" @click="handleEdit(2)">写攻略</div>
                    <div class="list-item" @click="handleEdit(3)">写笔记</div>
                    <div class="list-item itemActive">发视频</div>
                </div>
            </div>
            <div class="main-list">
                <Card title="发视频" :border="false" padding="0"></Card>
                <Card title="视频信息">
                    <EInput placeholder="请输入标题" :input-value="pageTitle" @inputChanged="getTitle"></EInput>
                </Card>
                <Card title="上传视频" desc="请上传时长不超过5分钟的视频 (支持mp4,mov,mkv等格式)">
                    <UploadVideo :pageVideo="pageVideo" @uploadFile="uploadFile"></UploadVideo>
                </Card>
                
                <Card title="选择关联国家/地区/城市/学校">
                    <ESelectSearch :select-data="relate" @getRelate="getRelate"></ESelectSearch>
                </Card>
                <Card title="更多选项">
                    <div class="more-select">
                        <ESelect placeholder="选择板块" :tableData="tagList" :default-value="pageTag"
                                 @getCotent="getPlate"></ESelect>
                        <ESelectRank placeholder="选择话题(最多三个)" :tableData="topicList" :selectData="pageTopic"
                                     @getContent="getSubject"></ESelectRank>
                    </div>
                </Card>
                
                <Card title="权限设置">
                    <div class="radio">
                        <span>允许转载:</span>
                        <label><input type="radio" v-model='reprint' name="reprint" value="1"><span>是</span></label>
                        <label><input type="radio" v-model='reprint' name="reprint" value="2"><span>否</span></label>
                    </div>
                    
                    <div class="radio">
                        <span>是否原创:</span>
                        <label><input type="radio" v-model='original' name="original" value="yes"><span>是</span></label>
                        <label><input type="radio" v-model='original' name="original" value="no"><span>否</span></label>
                    </div>
                </Card>
                
                <div class="btn">
                    <div class="submit" @click="handleSubmit">发布</div>
                    <div class="save" @click="handleSave">保存到草稿</div>
                </div>
            </div>
        </div>
        
        <div class="login-shadow" v-if="showLogin" @click="closeModal">
            <Login class="login-main"></Login>
        </div>
        
        <div v-if="isLoading" class="loading-shadow">
            <div class="loading">
                <img src="@assets/loading1.gif" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    import PageHeaderWhite from '@views/PageHeaderWhite'
    import Login from '@views/Login'
    import ArticleNav from '@views/ArticleNav'
    import Card from '@views/Card'
    import UploadVideo from '@views/UploadVideo'
    import ESelect from '@views/ESelect'
    import ESelectRank from '@views/ESelectRank'
    import ESelectSearch from '@views/ESelectSearch'
    import EInput from '@views/EInput'
    import {getQueryString} from '@utils/utils'
    
    export default {
        name: 'app',
        data() {
            return {
                ios: false,
                android: false,
                showLogin: false,
                userData: '',
                articleType: 4,
                articleId: getQueryString('articleId'),
                articleDraftId: getQueryString('articleDraftId'), //草稿箱Id
                from: getQueryString('from'),
                reprint: '2',
                original: 'no',
                pageTitle: '',
                pageVideo: {
                    videoUrl: '',
                    articleCover: '',
                    videoWidth: '',
                    videoHeight: '',
                    articleCoverWidth: '',
                    articleCoverHeight: '',
                    videoTime: '',
                },
                relate: {},
                tagList: [],
                topicList: [],
                pageTag: '',
                pageId: '',
                newRelate: {},
                pageTopic: [],
                country: [],
                isLoading: false, //发布中
            }
        },
        
        components: {
            PageHeaderWhite,
            Login,
            ArticleNav,
            Card,
            UploadVideo,
            ESelect,
            EInput,
            ESelectRank,
            ESelectSearch
        },
        created() {
            this.getTags()
            this.getTopic()
            if (this.articleId || this.articleDraftId) {
                if (this.from == 'draft') {
                    this.initDraftData()
                } else {
                    this.initData()
                }
            }
        },
        mounted() {
            //window中  vue写在mounted中
            // window.onbeforeunload = function(e) {
            //     e = e || window.event;
            //     // 兼容IE8和Firefox 4之前的版本
            //     if (e) {
            //         e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
            //     }
            //     // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
            //     return "您是否确认离开此页面-您输入的数据可能不会被保存";
            // }
        },
        methods: {
            initData() {
                this.$axios({
                    actionName: 'bbs.article.detail',
                    articleType: this.articleType,
                    articleId: this.articleId
                }).then(res => {
                    let data = res.data.articleDetail
                    this.pageTitle = data.articleName
                    this.pageVideo = {
                        videoUrl: data.videoUrl,
                        articleCover: data.articleCover,
                        videoWidth: data.articleCoverWidth,
                        videoHeight: data.articleCoverHeight,
                        articleCoverWidth: data.articleCoverWidth,
                        articleCoverHeight: data.articleCoverHeight,
                        videoTime: data.videoTime,
                    }
                    this.tagList.forEach((item, index) => {
                        if (data.articleClassifie === item.tagId) {
                            this.pageTag = item.tagName
                        }
                    })
                    this.pageId = data.articleClassifie
                    this.pageTopic = data.bbsTopicDOList
                    this.reprint = data.canReprint
                    this.original = data.original || 'no'
                    
                    let relate = {
                        relateName: data.relateName,
                        cityId: data.cityId,
                        countryId: data.countryId,
                        schoolId: data.schoolId
                    }
                    this.relate = {...relate}
                })
            },
            initDraftData() {
                this.$axios({
                    actionName: 'bbs.article.draft.detail',
                    articleType: this.articleType,
                    articleDraftId: this.articleDraftId
                }).then(res => {
                    let data = res.data.articleDetail
                    this.pageTitle = data.articleName
                    this.pageVideo = {
                        videoUrl: data.videoUrl,
                        articleCover: data.articleCover,
                        videoWidth: data.articleCoverWidth,
                        videoHeight: data.articleCoverHeight,
                        articleCoverWidth: data.articleCoverWidth,
                        articleCoverHeight: data.articleCoverHeight,
                        videoTime: data.videoTime,
                    }
                    this.tagList.forEach((item, index) => {
                        if (data.articleClassifie === item.tagId) {
                            this.pageTag = item.tagName
                        }
                    })
                    this.articleId = data.articleId || ''
                    this.pageId = data.articleClassifie
                    this.pageTopic = data.bbsTopicDOList || []
                    this.reprint = data.canReprint
                    this.original = data.original || 'no'
            
                    let relate = {
                        relateName: data.relateName,
                        cityId: data.cityId,
                        countryId: data.countryId,
                        schoolId: data.schoolId
                    }
                    this.relate = {...relate}
                })
            },
            getTags() {
                this.$axios({actionName: 'bbs.tags'}).then(res => {
                    this.tagList = res.data.tags
                    this.tagList.map(item => {
                        item.name = item.tagName
                        item.id = item.tagId
                    })
                })
            },
            getTopic() {
                this.$axios({actionName: 'bbs.topic.list'}).then(res => {
                    this.topicList = res.data
                })
            },
            mouseover(type) {
                if (type === 'ios') {
                    this.ios = true
                } else {
                    this.android = true
                }
            },
            mouseLeave(type) {
                if (type === 'ios') {
                    this.ios = false
                } else {
                    this.android = false
                }
            },
            handleClick() {
                this.showLogin = true
                // document.body.style.overflow = 'hidden'
            },
            closeModal(event) {
                let login = document.querySelector(".login-main")
                if (login) {
                    if (!login.contains(event.target)) {
                        this.showLogin = false
                        // document.body.style.overflow = ''
                    }
                }
            },
            getInfo(data) {
                this.userData = data
            },
            getBack() {
                window.location.href = './index.html'
            },
            uploadFile(obj) {
                this.pageVideo = obj
            },
            getTitle(title) {
                this.pageTitle = title
            },
           
            getPlate(id) {
                this.pageId = id
            },
            
            getRelate(obj) {
                this.newRelate = obj
            },
            getSubject(arr) {
                this.pageTopic = arr
            },
            handleEdit(type) {
                if (this.articleType == type) return
                window.location.href = '/editPage.html?articleType=' + type
            },
            handleSpace() {
                window.location.href = '/space.html'
            },
            handleSubmit() {
                if (!this.pageTitle) {
                    alert('请输入标题')
                    return
                } else if (!this.pageVideo.videoUrl) {
                    alert('请上传视频')
                    return
                }  else if (!this.pageId) {
                    alert('请选择板块')
                    return
                } else if (!this.newRelate.relateName) {
                    alert('请选择关联')
                    return
                }
                let topicList = []
                
                this.pageTopic.forEach(item => {
                    topicList.push(item.topicId)
                })
                
                this.isLoading = true
                this.$axios({
                    actionName: 'bbs.article.push',
                    articleId: this.articleId ? this.articleId : '',
                    articleDraftId: this.articleDraftId,
                    articleName: this.pageTitle,
                    bbsTopicDOList: JSON.stringify(topicList),
                    canReprint: this.reprint,
                    articleType: this.articleType,
                    articleClassifie: this.pageId,
                    original: this.original,
                    ...this.newRelate,
                    ...this.pageVideo
                }).then(res => {
                    window.location.href = '/space.html?navIndex=2'
                }).catch(err => {
                    this.isLoading = false
                    this.$message({content: err.msg, delay: 5000})
                })
            },
            //保存草稿
            handleSave() {
                if (!this.pageTitle && !this.pageVideo.videoUrl) {
                    alert('请输入标题或上传视频')
                    return
                }
                
                let topicList = []
                this.pageTopic.forEach(item => {
                    topicList.push(item.topicId)
                })
        
                this.$axios({
                    actionName: 'bbs.article.draft',
                    articleId: this.articleId ? this.articleId : '',
                    articleDraftId: this.articleDraftId,
                    articleName: this.pageTitle,
                    bbsTopicDOList: JSON.stringify(topicList),
                    canReprint: this.reprint,
                    articleType: this.articleType,
                    articleClassifie: this.pageId,
                    original: this.original,
                    ...this.newRelate,
                    ...this.pageVideo
                }).then(res => {
                    this.$message({content: '内容将保存在“我的文章”-“草稿箱"中', delay: 3000})
                    this.articleDraftId = res.data
    
                    if (this.from !== 'draft') {
                        window.history.pushState({}, 0,  window.location.href + '&from=draft&articleDraftId=' + res.data);
                        this.from = 'draft'
                    }
                }).catch(err => {
                    this.$message({content: err.msg, delay: 3000})
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    html, body {
        background-color: rgba(0, 0, 0, .04);
    }
    
    #app {
        position: relative;
        width: 100%;
        min-width: 1128px;
        min-height: 800px;
        background-color: rgba(0, 0, 0, .04);
        -webkit-background-size: cover;
        background-size: cover;
        
        .main {
            width: 1128px;
            z-index: 99;
            margin: 16px auto 0;
            .flexed(center, flex-start);
            
            .main-info {
                width: 216px;
                margin-right: 12px;
                
                .user {
                    width: 100%;
                    padding: 38px 0 32px;
                    margin-bottom: 16px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    
                    .user-logo {
                        display: block;
                        width: 88px;
                        height: 88px;
                        margin: 0 auto 27px;
                        border-radius: 50%;
                    }
                    
                    .user-name {
                        height: 22px;
                        font-size: 16px;
                        font-weight: 500;
                        color: rgba(0, 0, 0, 1);
                        line-height: 22px;
                        text-align: center;
                    }
                    
                    .user-desc {
                        height: 20px;
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, .4);
                        line-height: 20px;
                        text-align: center;
                    }
                }
                
                .list {
                    width: 216px;
                    padding-bottom: 10px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 4px;
                    opacity: 0.8;
                    
                    .list-title {
                        .flexed(flex-start);
                        height: 40px;
                        margin-bottom: 10px;
                        font-size: 14px;
                        font-weight: bold;
                        color: rgba(0, 0, 0, 1);
                        cursor: pointer;
                        
                        &:hover {
                            background-color: rgba(255, 220, 32, 1);
                        }
                        
                        img {
                            margin: 0 8px 0 27px;
                            width: 13px;
                            height: auto;
                        }
                    }
                    
                    .list-item {
                        width: 216px;
                        height: 40px;
                        padding-left: 50px;
                        /*margin-left: 50px;*/
                        /*margin-bottom: 20px;*/
                        font-size: 14px;
                        color: rgba(0, 0, 0, 1);
                        line-height: 40px;
                        cursor: pointer;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                        
                        &:hover {
                            background-color: rgba(255, 220, 32, 1);
                        }
                    }
                    
                    .itemActive {
                        padding-left: 46px;
                        border-left: 4px solid rgba(255, 220, 32, 1);
                        font-weight: bold;
                    }
                }
            }
            
            .main-list {
                width: 900px;
                padding-bottom: 100px;
                
                .more-select {
                }
                
                .radio {
                    margin-bottom: 10px;
                    
                    span {
                        margin-right: 32px;
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, .4);
                    }
                    
                    label {
                        margin-right: 32px;
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, 1);
                        line-height: 20px;
                        vertical-align: middle;
                    }
                    
                    input {
                        margin-right: 8px;
                    }
                    
                    input[type="radio"] {
                        width: 12px;
                        height: 12px;
                        opacity: 0;
                    }
                    
                    input[type="radio"] + span::before {
                        content: "\a0"; /*不换行空格*/
                        display: inline-block;
                        vertical-align: middle;
                        width: 16px;
                        height: 16px;
                        margin-right: 8px;
                        border-radius: 8px;
                        border: 1px solid rgba(0, 0, 0, .4);
                        box-sizing: border-box;
                    }
                    
                    input[type="radio"]:checked + span::before {
                        background-color: #FFDC20;
                        background-clip: content-box;
                        padding: 4px;
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                    }
                    
                    input[type="radio"] {
                        position: absolute;
                        opacity: 0;
                    }
                }
                
                .btn {
                    .flexed(flex-start);
                    cursor: pointer;
                    
                    .submit {
                        width: 160px;
                        height: 40px;
                        background: rgba(255, 220, 32, 1);
                        border-radius: 4px;
                        font-size: 14px;
                        font-weight: bold;
                        text-align: center;
                        color: rgba(0, 0, 0, 1);
                        line-height: 40px;
                    }
    
                    .save {
                        margin-left: 48px;
                        height: 20px;
                        font-size: 14px;
                        font-weight: bold;
                        color: rgba(250, 100, 0, 1);
                        line-height: 20px;
                    }
                }
                
            }
        }
        
        .bottom {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .login-shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            z-index: 9999;
        }
        
        .loading-shadow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            z-index: 9999;
            
            .loading {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50px;
                transform: translate(-50% -50%);
            }
        }
    }
</style>
